import Head from 'next/head';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import SourceCode from '../../../components/prop-tables/ColumnOptionsSource';
import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';

<Head>
  <title>{'Column Options - Mantine React Table V2 Docs'}</title>
  <meta
    name="description"
    content="All the column options that can be used in Mantine React Table"
  />
  <meta
    property="og:title"
    content="Mantine React Table Column Options API Reference"
  />
  <meta
    property="og:description"
    content="A reference of all the column options that can be used in Mantine React Table"
  />
</Head>

## Column Options

<OptionsSwitcher
  links={[
    {
      label: 'Table Options',
      value: 'table-options',
    },
    {
      label: 'Column Options',
      value: 'column-options',
    },
    {
      label: 'State Options',
      value: 'state-options',
    },
  ]}
/>

> Many of the column options you can pass here are the same as the ones that you can pass to the [useReactTable](https://tanstack.com/table/v8/docs/api/core/column-def) ColumnDefs

Here is a list of all the column options you can specify in a `column` definition.

```jsx
const columns = useMemo(
  () => [
    {
      accessorKey: 'name',
      header: 'Name',
      // All of the options you can specify here
    },
  ],
  [],
);

const table = useMantineReactTable({ columns, data });

return <MantineReactTable table={table} />;
```

<ColumnOptionsTable />

<SourceCode />
